<template>
    <view class="gy-tag" :class="{
		success: props.type === 'success',
		warning: props.type === 'warning',
		already: props.type === 'already',
		plain: props.plain,
		plainFill: props.plainFill
	}">
        <slot></slot>
    </view>
</template>

<script lang="ts" setup>

    const props = defineProps({
        type: {
            type: String
        },
		plain: {
			type: Boolean,
			default: false
		},
		plainFill: {
			type: Boolean,
			default: false
		}
    });

</script>

<style lang="scss" scoped>
	.gy-tag{
		height: 2em;
	    @include flex-center-center;
	    display: inline-flex;
	    background-color: #EEF4FF;
	    color: #5795FF;
	    font-size: 0.7em;
	    border-radius: var(--gy-border-radius-medium);
		overflow: hidden;
	    padding: 0 1em;
		border: 1rpx solid var(--gy-color-primary);
	}
	.already{
		background-color: rgba(188, 183, 25, .25);
		color: #544900;
	}
	.gy-tag.plain{
		background-color: transparent;
		border: 1rpx solid var(--gy-color-primary);
	}
	.gy-tag.plainFill{
		border: 1rpx solid var(--gy-color-primary);
		color: #ffffff;
		background-color: var(--gy-color-primary);
	}
	.gy-tag.success{
	    color: var(--gy-color-success); 
	    background-color: #f0f9eb;
		border: 1rpx solid var(--gy-color-success);
	}
	.gy-tag.success.plain{
		background-color: transparent;
		border: 1rpx solid var(--gy-color-success);
	}
	.gy-tag.success.plainFill{
		border: 1rpx solid var(--gy-color-success);
	    background-color: #f0f9eb;
	}
	.gy-tag.warning{
	    color: var(--gy-color-warning);
	    background-color: #faecd8;
		border: 1rpx solid var(--gy-color-warning);
	}
	.gy-tag.warning.plain{
		background-color: transparent;
		border: 1rpx solid var(--gy-color-warning);
	}
	.gy-tag.warning.plainFill{
		border: 1rpx solid var(--gy-color-warning);
	    background-color: #FCF4EA;
	}
	
</style>